<template>
  <view>
    <u-form :model="form" ref="uForm" label-position="top" :label-style="labelStyle" :border-bottom="false">
      <u-form-item label="您的城市" prop="city" :border-bottom="false" class="c-flex">
        <u-row>
          <u-col :span="4" gutter="0">
            <u-input
              class="c-flex-1"
              placeholder="选择省份"
              v-model="form.province"
              :custom-style="customStyle"
              type="select"
              :clearable="false"
              @click="getProvince"
              @input="initProvince"
              :selectOpen="show"
            />
          </u-col>
          <u-col :span="4">
            <u-input
              class="c-flex-1"
              placeholder="选择市"
              v-model="form.city"
              :custom-style="customStyle"
              type="select"
              :clearable="false"
              @click="getCity"
              @input="params.id ? false : (form.area = '')"
              :selectOpen="show"
            />
          </u-col>
          <u-col :span="4">
            <u-input
              class="c-flex-1"
              placeholder="区/县"
              v-model="form.area"
              :custom-style="customStyle"
              type="select"
              :clearable="false"
              @click="getArea"
              :selectOpen="show"
            />
          </u-col>
        </u-row>

        <u-select v-model="show" :list="actionSheetList" @confirm="confirm"></u-select>
      </u-form-item>
      <u-form-item
        label="具体地址"
        prop="address"
        :border-bottom="false"
        :right-icon-style="{position: 'absolute', right: '70rpx', fontSize: '40rpx', transform: 'translateY(-20rpx)'}"
      >
        <u-input v-model="form.address" :custom-style="addressCustomStyle" :clearable="false" @blur="isAddress" />
      </u-form-item>
      <u-form-item label="您的姓名" prop="name" :border-bottom="false">
        <u-input v-model="form.name" :custom-style="nameCustomStyle" :clearable="false" @blur="isName" />
      </u-form-item>
      <u-form-item label="您的电话号" prop="phone" :border-bottom="false">
        <u-input v-model="form.phone" :custom-style="phoneCustomStyle" :clearable="false" @blur="isPhone" />
      </u-form-item>
    </u-form>
    <SaveButton @navTo="submit" text="提交地址" />
  </view>
</template>
<script>
  import SaveButton from '@/commponents/public/button/SaveButton'
  import pub from '@/services/public'
  import address from '@/services/address'
  import url from '../../common/util/url'

  export default {
    components: {
      SaveButton
    },
    data() {
      return {
        params: '',
        qqmapsdk: '',
        title: '修改地址',
        actionSheetList: [],
        show: false,
        labelStyle: {
          fontSize: '34.4rpx',
          color: '#8992A3',
          fontFamily: 'PingFang SC',
          fontWeight: '600'
        },
        addressCustomStyle: {
          border: '1px solid #F1F3F9',
          padding: '12rpx 48rpx 12rpx 32rpx',
          borderRadius: '36rpx'
        },
        nameCustomStyle: {
          border: '1px solid #F1F3F9',
          padding: '12rpx 48rpx 12rpx 32rpx',
          borderRadius: '36rpx'
        },
        phoneCustomStyle: {
          border: '1px solid #F1F3F9',
          padding: '12rpx 48rpx 12rpx 32rpx',
          borderRadius: '36rpx'
        },
        liandongStyle: {},
        form: {
          province: '',
          provinceCode: '',
          cityCode: '',
          areaCode: '',
          city: '',
          area: '',
          address: '',
          name: '',
          phone: ''
        },
        code: '',
        active: 'province'
      }
    },

    methods: {
      initProvince() {
        if (this.params.id) return
        this.form.city = ''
        this.form.area = ''
      },
      confirm(data) {
        this.form[this.active] = data[0].label
        this.form[this.active + 'Code'] = data[0].value
        this.code = data[0].value
      },
      getProvince() {
        this.active = 'province'
        pub.regionSelect().then(data => {
          this.actionSheetList = data.map((item, index) => {
            item.label = item.name
            item.value = item.code
            return item
          })
          this.show = true
        })
      },
      getCity() {
        this.active = 'city'
        pub
          .regionSelect({
            code: this.form.provinceCode
          })
          .then(data => {
            this.actionSheetList = data.map((item, index) => {
              item.label = item.name
              item.value = item.code
              return item
            })
            this.show = true
          })
      },
      getArea() {
        this.active = 'area'
        pub
          .regionSelect({
            code: this.form.cityCode
          })
          .then(data => {
            this.actionSheetList = data.map((item, index) => {
              item.label = item.name
              item.value = item.code
              return item
            })
            this.show = true
          })
      },
      isPhone() {
        if (!this.$u.test.mobile(this.form.phone)) {
          this.phoneCustomStyle.border = '1px solid red'
          return false
        }
        if (this.$u.test.isEmpty(this.form.phone)) {
          this.phoneCustomStyle.border = '1px solid red'
          return false
        }
        this.phoneCustomStyle.border = '1px solid #F1F3F9'
        return true
      },
      isAddress() {
        if (this.$u.test.isEmpty(this.form.address)) {
          this.addressCustomStyle.border = '1px solid red'
        } else {
          this.addressCustomStyle.border = '1px solid #F1F3F9'
          return true
        }
      },
      isName() {
        if (this.$u.test.isEmpty(this.form.name)) {
          this.nameCustomStyle.border = '1px solid red'
        } else {
          this.nameCustomStyle.border = '1px solid #F1F3F9'
          return true
        }
      },
      submit() {
        if (this.form.provinceCode && this.form.cityCode && this.form.areaCode) {
          if (this.isAddress() && this.isName() && this.isPhone()) {
            if (this.params.id) {
              address
                .update({
                  addr: this.form.address,
                  area: this.form.area,
                  areaCode: this.form.areaCode,
                  city: this.form.city,
                  cityCode: this.form.cityCode,
                  isDefault: 0,
                  mobile: this.form.phone,
                  name: this.form.name,
                  province: this.form.province,
                  provinceCode: this.form.provinceCode,
                  id: this.params.id,
                  userId: wx.getStorageSync('userId')
                })
                .then(data => {
                  if (data.code === 0) {
                    wx.navigateTo({
                      url: this.params.from
                        ? '/pages/myaddress/index?from=' + this.params.from
                        : '/pages/myaddress/index'
                    })
                  }
                })
            } else {
              address
                .save({
                  addr: this.form.address,
                  area: this.form.area,
                  areaCode: this.form.areaCode,
                  city: this.form.city,
                  cityCode: this.form.cityCode,
                  isDefault: 0,
                  mobile: this.form.phone,
                  name: this.form.name,
                  province: this.form.province,
                  provinceCode: this.form.provinceCode,
                  userId: wx.getStorageSync('userId')
                })
                .then(data => {
                  if (data.code === 0) {
                    wx.navigateTo({
                      url: this.params.from
                        ? '/pages/myaddress/index?from=' + this.params.from
                        : '/pages/myaddress/index'
                    })
                  }
                })
            }
          }
        } else {
          wx.showToast({
            title: '请选择省市区',
            icon: 'none',
            duration: 2000
          })
        }
      },
      getInfo() {
        address.info(this.params.id).then(data => {
          this.form = data.data
          this.form.address = data.data.addr
          this.form.phone = data.data.mobile
          this.form.city = data.data.city
          this.form.area = data.data.area
        })
      }
    },
    mounted() {
      this.params = url.getCurrentPageParam()
      if (this.params.id) {
        this.getInfo()
      }
    }
  }
</script>

<style scoped>
  u-form >>> .u-form {
    padding: 0 48rpx;
  }
  u-form-item >>> .u-form-item--left {
    padding-left: 12rpx;
  }
  u-input >>> .u-input__right-icon__item {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20rpx;
  }
  u-col >>> .u-col {
    box-sizing: border-box;
  }
</style>
